<template>
  <div ref="bar" class="bar" />
</template>
<script>
import * as echarts from 'echarts'
import { mapState } from 'vuex'
export default {
  name: 'SaleMychart',
  // props: ['saleInfo'],
  computed: {
    ...mapState({
      saleInfos: state => state.home.echartsinfo
    })
  },
  mounted() {
    console.log('子组件挂载')
    console.log(this.saleInfos)
    const myChart = echarts.init(this.$refs.bar)
    myChart.setOption({
      title: {
        text: '销售额'
      },
      // this.saleInfo.length > 0 ? this.saleInfo.orderFullYearAxis :
      xAxis: {
        type: 'category',
        data: this.saleInfos.orderFullYearAxis
      },
      yAxis: {
        type: 'value'
      },
      // this.saleInfo.length > 0 ? this.saleInfo.orderFullYear :
      series: [
        {
          data: this.saleInfos.orderFullYear,
          type: 'bar',
          showBackground: true,
          color: '#bfa',
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    })
  }
}
</script>

<style scoped>
.bar{
  width: 100%;
  height: 300px;
}
</style>
